<script setup lang="ts">
import { ElDialog } from 'element-plus'
import { Star, StarFilled, Check, CirclePlus } from '@element-plus/icons-vue'
import { MeunItem } from '../interfaceType'
import { deepClone } from '@/utils/util'
import { formatDate } from '@/utils/date'
import { Setting } from '@element-plus/icons-vue'
import { pageStore } from '@/store/modules/pageConfig'
import contextMenu from '@/components/RightMenu/index'
import { RightMenuItem, ContextMenuOptions } from '@/components/RightMenu/interfaceType'

interface WaitInfo {
  id:string,
  content: string,
  time: string,
  important: boolean;
  remind: boolean;
  status: 0 | 1;
}

let waitAllList = ref<WaitInfo[]>([
  {
    id: '1',
    content: '测试内容1',
    time: '2022-01-01 12:00:00',
    status: 0,
    important: true,
    remind: false
  },
  {
    id: '2',
    content: '测试内容2',
    time: '2022-01-01 12:00:00',
    status: 1,
    important: true,
    remind: false
  },
  {
    id: '3',
    content: '测试内容3',
    time: '2022-01-01 12:00:00',
    status: 0,
    important: true,
    remind: true
  },
])

// let waitList = computed(() => {
//   return waitAllList.value.filter(item => item.status === 0)
// })

function onSuccess(item: WaitInfo) {
  // ElDialog
  item.status = 1
}

let dialogConfig = ref(false)
let dialogItem = ref<WaitInfo>()
let dialogItemIndex = ref(0)
let dialogType = ref('')
function openDiaglog(type: string, index: number) {
  dialogType.value = type
  if (type == 'edit') {
    dialogItemIndex.value = index
    dialogItem.value = deepClone(waitAllList.value[index])
  } else {
    dialogItem.value = {
      id: new Date().getTime().toString(),
      content: '',
      time: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      status: 0,
      important: false,
      remind: false
    }
  }
  dialogConfig.value = true
}
function saveWaitInfo() {
  if (dialogType.value == 'edit') {
    waitAllList.value[dialogItemIndex.value] = deepClone(dialogItem.value)
  } else {
    waitAllList.value.push(deepClone(dialogItem.value))
  }
  dialogConfig.value = false
}


const props = defineProps({
  config: { type: Object as () => MeunItem, required: true },
  keys: { type: String, default: '' },
  path: { type: String, default: '' },
})

const items: RightMenuItem[] = [
  {
    label: `删除`,
    svg: Setting,
    onClick: () => {
      pageStore().updateHomeListByPath(props.path, 'delete')
    }
  }
]
const options: ContextMenuOptions = {
  items
}

function openMenu(e: MouseEvent) {
  contextMenu(e, options)
}
</script>

<template>
  <div class="wait-box" style="height: 100%;" @contextmenu.prevent="openMenu">
    <div class="wait-box-title">{{ config?.name }}</div>
    <div class="wait-box-options" @click="openDiaglog('add', 0)">
      <el-icon color="#409efc" class="no-inherit">
        <CirclePlus />
      </el-icon>
    </div>
    <el-scrollbar class="scrollbar-demo">
      <slot v-for="(item, index) in waitAllList" :key="item">
        <div class="wait-row" v-if="item.status === 0">
          <div class="wait-row-content" @click="openDiaglog('edit', index)">{{ item.content }}</div>
          <div class="wait-row-time">
            <el-button text type="success" :icon="Check" circle @click="onSuccess(item)" title="完成" />
            <el-button text type="danger" :icon="item.important ? StarFilled : Star" circle title="重要"
              @click="() => { item.important = !item.important, console.log(item.important) }" />
            <span>{{ item.time }}</span>
          </div>
        </div>
      </slot>
    </el-scrollbar>
    <el-dialog v-if="dialogConfig" v-model="dialogConfig" title="待办编辑" width="500" :append-to-body="true">
      <div>
        <el-form v-model="dialogItem">
          <el-form-item>
            <el-input type="textarea" autocomplete="off" v-model="dialogItem!.content"
              :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Please input"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="dialogItem!.time" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY-MM-DD" time-format="HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/> </el-form-item>
          <el-form-item>
            <el-switch v-model="dialogItem!.important" active-text="重要" inactive-text="一般" />
          </el-form-item>
          <el-form-item>
            <el-switch v-model="dialogItem!.remind" active-text="提醒" inactive-text="不提醒" />
          </el-form-item>

        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogConfig = false" title="取消">取消</el-button>
          <el-button type="primary" @click="saveWaitInfo" title="保存">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.wait-box {
  background-color: rgba(0, 0, 0, 0.3);

  &-title {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
  }

  &-options {
    position: absolute;
    top: 0;
    right: 15px;
    opacity: 0;
    transition: opacity .3s;
    font-size: 22px;
  }

  &:hover {
    .wait-box-options {
      opacity: 1;
    }
  }

  .scrollbar-demo {
    height: calc(100% - 48px);

    .wait-row {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: auto;
      margin: 10px;
      margin-top: 0px;
      text-align: center;
      border-radius: 4px;
      background-color: rgb(255 255 255 / 10%);
      // color: var(--el-color-primary);
      font-size: 13px;

      .wait-row-content {
        text-align: left;
      }

      .wait-row-time {
        text-align: right;

        .el-button {
          padding: unset;
          height: auto;
          width: unset;
          background-color: unset;
        }

        .el-button+.el-button {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
